<template>
    <div>
        <page-header></page-header>
        <div class="body">
            <div class="container">
                <form class="user-form">
                    <h3 class="title">用户登录</h3>
                    <div class="field">
                        <label for="">用户名</label>
                        <input type="text" v-model="form.username" />
                    </div>

                    <div class="field">
                        <label for="">密码</label>
                        <input type="password" v-model="form.password" />
                    </div>

                    <div class="action">
                        <button type="button" @click="login">立即登录</button>
                    </div>
                </form>
            </div>
        </div>

        <page-footer></page-footer>
    </div>
</template>

<script>
import pageHeader from "@/components/commons/pageHeader";
import pageFooter from "@/components/commons/pageFooter";
export default {
    props: [],
    components: { pageHeader, pageFooter },
    data() {
        return {
            form: {
                username: "",
                password: "",
            },
        };
    },

    methods: {
        login() {
            this.$request
                .post("/api/user/login", this.form)
                .then((response) => {
                    if (response.status.code == 0) {
                        alert("登录成功！");
                        sessionStorage.setItem("token", response.data.token);
                        //应该保存用户ID到sessionStorage
                        this.$router.push("/");
                    }
                });
            //localStorage.setItem("token", "123456");
        },
    },
};
</script>

<style lang="less" scoped>
.user-form {
    width: 360px;
    margin: 150px auto;

    .title {
        text-align: center;
        font-size: 22px;
    }

    .field {
        margin: 15px 0;

        label {
            font-size: 17px;
            width: 60px;
            text-align: right;
            display: inline-block;
            margin-right: 5px;
        }

        input {
            height: 30px;
            width: 280px;
            padding: 0 10px;
            box-sizing: border-box;
        }
    }

    .action {
        margin: 25px 0;
        text-align: center;

        button {
            height: 30px;
            padding: 0 15px;
        }
    }
}
</style>